<template>
  <div>
    <el-col :span="6">
      <el-input
        v-model="filterText"
        placeholder="输入表名进行过滤"
        style="width: 80%;margin-bottom: 5px"
      />
      <el-tree
        :props="props"
        :load="loadNode"
        lazy
        :filter-node-method="filterNode"
        @node-click="handle"
      >
        <span
          slot-scope="{node}"
          class="custom-tree-node"
        >
          <span>{{ node.label }}</span>
        </span>
      </el-tree>
    </el-col>
    <el-col :span="18">
      <el-button>还原</el-button>
      <el-table
        ref="table"
        v-loading="crud.loading"
        :data="tableList"
        @select="crud.selectChange"
        @select-all="crud.selectAllChange"
        @selection-change="crud.selectionChangeHandler"
      >
        <el-table-column
          label="文件名称"
          prop="fileName"
        />
        <el-table-column
          label="文件大小"
          prop="fileSize"
        />
        <el-table-column
          label="创建时间"
          prop="status"
        />
        <el-table-column
          label="所属路径"
          prop="crtTs"
        />
      </el-table>
      <div style=" float: right;">
        <!--分页组件-->
        <pagination />
      </div>
    </el-col>
  </div>
</template>

<script>
import CRUD, {presenter, header, form, crud} from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import pagination from '@crud/Pagination'

const defaultCrud = CRUD({title: '', url: '', crudMethod: {}})
const defaultForm = {}
export default {
  name: 'DisasterRecoveryFileList',
  components: {rrOperation, pagination},
  mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
  data() {
    return {
      filterText: null,
      props: {
        label: 'name',
        children: 'zones',
        isLeaf: 'leaf'
      },
      tableList: [
        {
          dbName: 'sdata',
          tableName: 'customer_info',
          fileName: 'customer_info.txt',
          fileSize: '23.43KB',
          exportTime: '2023-08-10 12:55:12'
        }
      ],
      form: {
        tableName: null,
        exportPath: null,
        exportFields: null,
        filterConditions: null
      },
      rules: {

      }
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  created() {
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    handle(node) {
      this.form.tableName = node.name
    },
    loadNode(node, resolve) {
      if (node.level === 0) {
        return resolve([{name: 'usr'}])
      }
      if (node.level > 1) return resolve([])

      setTimeout(() => {
        const data = [{
          name: 'local',
          leaf: true
        }, {
          name: 'opt'
        }]

        resolve(data)
      }, 500)
    },
    downFile() {

    }
  }
}
</script>
<style scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 28px;
}
</style>
